<!--
 * @Author: your name
 * @Date: 2021-10-21 21:57:44
 * @LastEditTime: 2021-10-22 14:35:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_test3\src\components\order\Order.vue
-->
<template>
  <div>
      <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
        <!-- 搜索与添加区域 -->
        <el-row>
            <el-col :span="5">
            <el-input
                placeholder="请输入内容"
                v-model="queryInfo.query"
                clearable
                @clear="getOrderslist"
            >
                <el-button
                slot="append"
                icon="el-icon-search"
                @click="getOrderslist"
                ></el-button>
            </el-input>
            </el-col>
            
        </el-row>

        <!-- 订单列表数据 -->
         <el-table :data="ordersList" border stripe>
            <el-table-column type="index" label="ID"></el-table-column>
            <el-table-column label="订单编号" prop="order_number" ></el-table-column>
            <el-table-column label="订单价格" prop="order_price" ></el-table-column>
            <el-table-column label="是否付款" prop="pay_status" >
                <template v-slot="scope">
                    <el-tag type="danger" v-if="scope.row.pay_status === '0'">未付款</el-tag>
                    <el-tag type="success" v-else>已付款</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="是否发货" prop="is_send" ></el-table-column>
            <el-table-column label="下单时间" prop="create_time"  :formatter="dateFormat"></el-table-column>
            <el-table-column label="操作">
            <template>
                <!-- 编辑按钮 -->
                <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="showBox"
                ></el-button>
                <!-- 物流按钮 -->
                <el-button
                type="success"
                icon="el-icon-location"
                size="mini"
                @click="showProgressBox"
                ></el-button>
            </template>
            </el-table-column>
        </el-table>

         <!-- 分页区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background
            >
            </el-pagination>


    </el-card>

    <!-- //编辑地址对话框 -->
            <el-dialog
        title="修改地址"
        :visible.sync="addressVisible"
        width="50%"
        @close="addressDialogClosed">
        <el-form :model="addressForm" :rules="addressrules" ref="addressruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="省市区/县" prop="address1">
                <el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="address2">
                <el-input v-model="addressForm.address2"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addressVisible = false">取 消</el-button>
            <el-button type="primary" @click="addressVisible = false">确 定</el-button>
        </span>
        </el-dialog>

        <!-- 物流对话框 -->
        <el-dialog
        title="物流进度"
        :visible.sync="ProgressVisible"
        width="50%"
        >
       <!-- timestamp 时间戳 string -->
       <!-- 时间线 -->
        <el-timeline>
                <el-timeline-item v-for="(activity, index) in logisticsInfo" :key="index"
                :timestamp="activity.time">
                    {{activity.context}}
                </el-timeline-item>
        </el-timeline>
        </el-dialog>

  </div>
</template>

<script>
import moment from 'moment'
import cityData from './citydata'

export default {
    created(){
        this.getOrderslist()
    },
    methods:{
        // 获取订单列表
         async getOrderslist(){
             const { data: res } = await this.$http.get("orders", {
                params: this.queryInfo,
            })
            if (res.meta.status !== 200)
                return this.$message.error("获取用户列表失败")
                // console.log(res.data)
            this.ordersList = res.data.goods
            this.total = res.data.total
            },

            //时间格式化
            dateFormat(row, column) {
            var date = row[column.property];
            if (date == undefined) {
                return "";
            }
            return moment(date).format("YYYY-MM-DD HH:mm:ss");
            },
        //时间格式化

            //编辑地址
            showBox(){
                this.addressVisible = true
            },

             addressDialogClosed(){
                this.$refs.addressruleForm.resetFields()
            },

            //物流查询
            async showProgressBox(){
                // const {data:res} =  await this.$http.get('../../../static/progress.json')
                // console.log(res)
                // if (res.meta.status !==200) {
                //     this.$message.error('物流查询失败')
                // }
                // this.progressData = res.data
                // console.log(this.progressData)
               this.ProgressVisible=true
            }

    },
    data() {
        return {
            queryInfo: {
                    query: "",
                    //    当前的页数
                    pagenum: 1,
                    // 当前每页限时多少条数据
                    pagesize: 15,
                },
            //订单列表
            ordersList: [],
            total: 0,

             // 监听pagesize改变事件
            handleSizeChange(newSize) {
            //   console.log(newSize)
            this.queryInfo.pagesize = newSize
            this.getOrderslist()
            },
            //监听页码值的改变
            handleCurrentChange(newPage) {
            //   console.log(newPage)
            this.queryInfo.pagenum = newPage
            this.getOrderslist()
            },

            //控制地址对话框的显示和隐藏
            addressVisible:false,

            addressForm:{
                address1:[],
                address2:''
            },

            addressrules:{
                address1:[
                { required: true, message: '请选择省市区/县', trigger: 'blur' },
            ],
            address2:[
            { required: true, message: '请输入详细地址', trigger: 'blur' },
          ],

            },

            cityData,

            // 物流对话框的显示和隐藏
            ProgressVisible:false,

            progressData:[],
           
           // 物流数据信息
            logisticsInfo: [
                            {
                            "time": "2018-05-10 09:39:00",
                            "ftime": "2018-05-10 09:39:00",
                            "context": "已签收,感谢使用顺丰,期待再次为您服务",
                            "location": ""
                            },
                            {
                            "time": "2018-05-10 08:23:00",
                            "ftime": "2018-05-10 08:23:00",
                            "context": "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
                            "location": ""
                            },
                            {
                            "time": "2018-05-10 07:32:00",
                            "ftime": "2018-05-10 07:32:00",
                            "context": "快件到达 [北京海淀育新小区营业点]",
                            "location": ""
                            },
                            {
                            "time": "2018-05-10 02:03:00",
                            "ftime": "2018-05-10 02:03:00",
                            "context": "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
                            "location": ""
                            },
                            {
                            "time": "2018-05-09 23:05:00",
                            "ftime": "2018-05-09 23:05:00",
                            "context": "快件到达 [北京顺义集散中心]",
                            "location": ""
                            },
                            {
                            "time": "2018-05-09 21:21:00",
                            "ftime": "2018-05-09 21:21:00",
                            "context": "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
                            "location": ""
                            },
                            {
                            "time": "2018-05-09 13:07:00",
                            "ftime": "2018-05-09 13:07:00",
                            "context": "顺丰速运 已收取快件",
                            "location": ""
                            },
                            {
                            "time": "2018-05-09 12:25:03",
                            "ftime": "2018-05-09 12:25:03",
                            "context": "卖家发货",
                            "location": ""
                            },
                            {
                            "time": "2018-05-09 12:22:24",
                            "ftime": "2018-05-09 12:22:24",
                            "context": "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
                            "location": ""
                            },
                            {
                            "time": "2018-05-08 21:36:04",
                            "ftime": "2018-05-08 21:36:04",
                            "context": "商品已经下单",
                            "location": ""
                            }
                        ],

        }
    },
}
</script>

<style lang="less" scoped>
.el-cascader{
    width: 100%;
}
</style>>

